<template>
  <div class="app">
    <div class="allBtn">
      <!-- 选择图片按钮 -->
      <div class="filebutton">
        <div>选择图片</div>
        <input type="file" multiple @change="loadImg" ref="inputFile" />
      </div>
      <!-- 上传图片按钮 -->
      <button class="uploadBtn" @click="uploadFile">上传图片</button>
    </div>
    <ul class="view">
      <li v-for="(item, index) in list" :key="index">
        <img :src="item" alt="item.name" class="listImg" />
      </li>
    </ul>
    <div class="progress">
      <p>上传进度</p>
      <div class="progressBar">
        <div class="progressRate" :style="{ width: index + '%' }"></div>
      </div>
      <div>{{ index }}%</div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      index: 0,
      list: [],
      progressRate: 0,
      progressMsg: "",
    };
  },
  methods: {
    //加载图片信息
    loadImg(e) {
      // console.log(e.target.files);
      for (let item of e.target.files) {
        if (!/image\/\w+/.test(item.type)) {
          alert("只能选择图片");
          return;
        }
        var _this = this;
        let reader = new FileReader();
        reader.readAsDataURL(item);
        reader.addEventListener("load", function () {
          _this.list.push(this.result);
        });
      }
      this.index=0
    },
    //获取图片信息并上传
    async uploadFile() {
      let self = this;
      console.log(self);
      if (!this.$refs.inputFile.files.length) return;
      const files = Array.from(this.$refs.inputFile.files);
      // this.upload({ url: "/multiple", files });
      let formData = new FormData();
      files.forEach((file) => {
        formData.append("file", file);
      });
      this.$http
        .post("/multiple", formData, {
          onUploadProgress: function (progressEvent) {
            const percentCompleted = Math.round(
              (progressEvent.loaded * 100) / progressEvent.total
            );
            self.index = percentCompleted;
          },
        })
        .then((res) => {
          console.log(res.data);
        });
      this.list = [];
      console.log(self);
    },
  },
  mounted() {},
};
</script>


<style scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
ul,
li {
  list-style: none;
}
.app {
  width: 500px;
  background-color: rgb(255, 255, 255);
  border-radius: 5px;
  margin: 0 auto;
  box-shadow: 2px 2px 5px rgb(221, 221, 221);
  margin-top: 50px;
}
/* 所有按钮 */
.allBtn {
  width: 350px;
  margin: 0 auto;
}

.view {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  align-items: space-around;
}

.view > li {
  width: 100px;
  height: 100px;
  box-sizing: border-box;
  background-color: rgb(226, 208, 243);
  margin: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
  box-shadow: 2px 2px 5px rgb(221, 221, 221);
}

/* 图片样式 */
.listImg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 5px;
}

/* 上传按钮样式 */
.uploadBtn {
  margin: 10px;
  width: 150px;
  height: 30px;
  background-color: rgb(222, 186, 255);
  border-radius: 15px;
  border: 0;
  box-shadow: 2px 2px 5px rgb(221, 221, 221);
}

/* 选择文件按钮样式 */
.filebutton {
  margin: 10px;
  vertical-align: top;
  display: inline-block;
  width: 150px;
  height: 30px;
  position: relative;
  overflow: hidden;
  border-radius: 15px;
  box-shadow: 2px 2px 5px rgb(221, 221, 221);
}

.filebutton input {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  display: inline-block;
  border: 1px solid rgb(206, 0, 0);
  opacity: 0;
}

.filebutton div {
  width: 100%;
  height: 100%;
  background-color: aqua;
  text-align: center;
  line-height: 30px;
}

/* 进度条样式 */
.progress {
  height: 20px;
  width: 470px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px 0 15px 10px;
}

/* 进度条外框样式 */
.progressBar {
  width: 300px;
  height: 8px;
  border: 2px solid black;
  border-radius: 15px;
  background-color: rgb(219, 219, 219);
  margin: 0 5px;
}
/* 进度条内进度样式 */
.progressRate {
  height: 100%;
  border-radius: 15px;
  background-color: rgb(129, 152, 255);
  transition: all 0.5s ease-in-out;
}
</style>

